<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预约挂号</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <!--<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/milligram.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/fonts.style.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/style.css" type="text/css" />-->


    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!--<script src="../static/js/jquery-3.4.1.js"></script>-->
    <!--<script src="../static/js/jQueryCode.js"></script>-->
    <!--<script src="../static/js/bootstrap.min.js"></script>-->
    <script th:inline="javascript">
        $(function () {
            //选择医院
            $("#allHospital").change(function () {
                $("#summit").attr("disabled",true);
                $("#doctorInfo").html("");
                $("#hospitalName").val( "");
                $("#departmentName").val( "");
                var hospitalName = $(this).find("option:selected").val();
                if(hospitalName!=="请选择" && hospitalName!=null){
                    $("#hospitalName").val( hospitalName);
                    $("#departmentName").attr("disabled",false);
                    $("#allDepartment").attr("disabled",false);
                    $.post("/reservation/selectDepartment", {name:hospitalName},function (data) {
                        if(data.length>0){
                            $("#allDepartment").html("<option>请选择</option>");
                            $("#allDoctor").html("<option>请选择</option>");
                            $("#allTime").html("<option>请选择</option>");
                            for (var i = 0; i<data.length; i++){
                                $("#allDepartment").append("<option value='"+ data[i].name +"'>" + data[i].name + "</option>");
                            }
                        }
                        else
                            $("#allDepartment").html("<option>请选择</option>");
                    })
                }
                else {
                    $("#departmentName").attr("disabled",true);
                    $("#allDepartment").attr("disabled",true);
                    $("#allDoctor").attr("disabled",true);
                    $("#allTime").attr("disabled",true);
                    $("#allDepartment").html("<option>请选择</option>");
                    $("#allDoctor").html("<option>请选择</option>");
                    $("#allTime").html("<option>请选择</option>");
                }
            });

            //选择科室
            $("#allDepartment").change(function () {
                $("#summit").attr("disabled",true);
                $("#doctorInfo").html("");
                var hospitalName = $("#allHospital").find("option:selected").val();
                var departmentName = $(this).find("option:selected").val();
                if(departmentName!=="请选择" && departmentName!=null){
                    $("#departmentName").val(departmentName);
                    $("#allDoctor").attr("disabled",false);
                    $.post("/reservation/selectDoctor", {hname:hospitalName,dname:departmentName},function (doctorList) {
                        if(doctorList.length>0){
                            $("#allDoctor").html("<option>请选择</option>");
                            $("#allTime").html("<option>请选择</option>");
                            for (var i = 0; i<doctorList.length; i++){
                                $("#allDoctor").append("<option value='"+ doctorList[i].name +"'>" + doctorList[i].name + "</option>");
                            }
                        }
                    else
                        $("#allDoctor").html("<option>请选择</option>");
                    })
                }
                else {
                    $("#allDoctor").attr("disabled",true);
                    $("#allTime").attr("disabled",true);
                    $("#allDoctor").html("<option>请选择</option>");
                    $("#allTime").html("<option>请选择</option>");
                }
            });

            //选择医生
            $("#allDoctor").change(function () {
                $("#summit").attr("disabled",true);
                $("#doctorInfo").html("");
                var hospitalName = $("#allHospital").find("option:selected").text();
                var departmentName = $("#allDepartment").find("option:selected").text();
                var doctorName = $(this).find("option:selected").text();
                if(doctorName!=="请选择" && doctorName!=null) {
                    $("#allTime").attr("disabled", false);
                    $.post("/reservation/selectTime", {
                        hname: hospitalName,
                        dname: departmentName,
                        name: doctorName
                    }, function (data) {
                        var doctor = data.doctor;

                        // ----------------------------------插入医生信息----------------------------------
                         $("#doctorInfo").html(
                            "<hr class='divider'><h5><span class='icon-profile'></span>医生信息</h5>"
                            + "<table><tr class='tab-info-tr'><th>医生姓名:</th><td>" + doctor.name
                            + "</td></tr><tr class='tab-info-tr'><th>联系方式:</th><td>" + doctor.phone
                            + "</td></tr><tr class='tab-info-tr'><th>简介:</th><td>" + doctor.introduction
                            + "</td></tr></table>"
                        );

                        var timeList = data.afterWeek;
                        if (timeList.length > 0) {
                            $("#allTime").html("<option>请选择</option>");
                            for (var i = 0; i < timeList.length; i++) {
                                var time = new Date(timeList[i]);
                                var hour = time.getHours();
                                var s = "";
                                if(hour<12)
                                    s = " 上午";
                                else
                                    s = " 下午";
                                var week = "";
                                switch (time.getDay()) {
                                    case 0:
                                        week = "  星期日";
                                        break;
                                    case 1:
                                        week = "  星期一";
                                        break;
                                    case 2:
                                        week = "  星期二";
                                        break;
                                    case 3:
                                        week = "  星期三";
                                        break;
                                    case 4:
                                        week = "  星期四";
                                        break;
                                    case 5:
                                        week = "  星期五";
                                        break;
                                    case 6:
                                        week = "  星期六";
                                }
                                $("#allTime").append("<option value='" + time + "'>" + time.toLocaleDateString()+ s + week + "</option>")
                            }
                        } else{
                            $("#allTime").attr("disabled", true);
                            $("#allTime").html("<option value='不可预约'>该医生没有时间可预约</option>")
                        }
                    })
                }
                else
                    $("#doctorInfo").html("");
                    $("#allTime").html("<option>请选择</option>");
            });

            //选择预约时间
            $("#allTime").change(function () {
                var time = $(this).find("option:checked").text();
                if(time!=="请选择" && time!=null)
                   $("#summit").attr("disabled",false);
                else
                   $("#summit").attr("disabled",true);
            });

            //点击预约按钮
            $("#summit").click(function () {
                var hospitalName = $("#allHospital").find("option:selected").text();
                var departmentName = $("#allDepartment").find("option:selected").text();
                var doctorName = $("#allDoctor").find("option:selected").text();
                var time = $("#allTime").find("option:selected").val();
                $.post("/reservation/reserve",{hospitalName:hospitalName, departmentName:departmentName, doctorName:doctorName, time:time},function (reservation) {
                    if(reservation!=null && reservation !==""){

                        // ----------------------------------加入生成订单模态框 信息----------------------------------
                        $("#modal-bill-detail .modal-body .container").append(
                            "<table><tr class='tab-info-tr'><th>预约人:</th><td>" + reservation.userName
                            + "</td></tr><tr class='tab-info-tr'><th>医院:</th><td>" + reservation.hospitalName
                            + "</td></tr><tr class='tab-info-tr'><th>科室:</th><td>" + reservation.departmentName
                            + "</td></tr><tr class='tab-info-tr'><th>医生姓名:</th><td>" + reservation.doctorName
                            + "</td></tr><tr class='tab-info-tr'><th>联系方式:</th><td>" + reservation.doctorPhone
                            + "</td></tr><tr class='tab-info-tr'><th>预约时间:</th><td>" + reservation.time
                            + "</td></tr><tr class='tab-info-tr'><th>支付金额:</th><td>" + reservation.pay
                            + "</td></tr><tr class='tab-info-tr'><th>订单状态:</th><td>" + reservation.status
                            + "</td></tr></table>"
                        );
                        // ----------------------------------加入生成订单模态框 按钮----------------------------------
                       $("#modal-bill-detail .modal-body .container").append(
                            "<div class='bill-detail-btn-li'><input value='" + reservation.id
                            + "' id='reservationId' type='hidden'/><input value='" + reservation.pay
                            + "' id='reservationPay' type='hidden'/><input id='pay' type='button' value='付款'/></div>"
                        );
                    }
                    else {
                        confirm("预约已满,请重新选择！")
                    }
                });
            });

            //关闭模态框后改变按钮状态
            $("#modal-bill-detail").on("hidden.bs.modal", function () {
                 $("#summit").attr("disabled", true);
                 $("#summit").val("已生成订单，请前往“我的订单”付款,5分钟内有效！");

            });

            //点击付款
            $("#modal-bill-detail .modal-body .container").on("click","#pay",function () {
                var id = $("#reservationId").val();
                var pay = $("#reservationPay").val();
                $.post("/reservation/pay", {id:id, pay:pay}, function (msg) {
                    confirm(msg);
                    if(msg === "支付完成，预约成功！")
                        location.href = "/reservation/toBill";
                    else
                        location.href = "/reservation/toRecharge"
                })
            });

            //医院模糊查找
            $("#hospitalName").change(function () {
                $("#doctorInfo").html("");
                var name = $(this).val();
                if(name!==""){
                    $("#departmentName").attr("disabled", true);
                    $("#allDepartment").attr("disabled", true);
                    $("#allDoctor").attr("disabled", true);
                    $("#allTime").attr("disabled", true);
                    $.post("/reservation/findHospital", {name:name},function (data) {
                        if(data.length>0){
                            $("#allHospital").html("");
                            $("#allDepartment").html("<option>请选择</option>");
                            $("#allDoctor").html("<option>请选择</option>");
                            $("#allTime").html("<option>请选择</option>");
                            for (var i = 0; i<data.length; i++){
                                $("#allHospital").append("<option>请选择</option><option value='"+ data[i].name +"'>" + data[i].name + "</option>");
                            }
                        }
                        else
                            $("#allHospital").html("<option>没有找到相关医院</option>");
                    })
                }
                else
                    location.href = "/reservation/toReserve";
            });

            //科室模糊查找
            $("#departmentName").change(function () {
                var hname = $("#allHospital").find("option:selected").val();
                var name = $(this).val();
                if(name!=="") {
                    $("#allDoctor").attr("disabled", true);
                    $("#allTime").attr("disabled", true);
                    $.post("/reservation/findDepartment", {hname:hname, name: name}, function (list) {
                        if (list.length > 0) {
                            $("#allDepartment").html("<option>请选择</option>");
                            $("#allDoctor").html("<option>请选择</option>");
                            $("#allTime").html("<option>请选择</option>");
                            for (var i = 0; i < list.length; i++) {
                                $("#allDepartment").append("<option value='" + list[i].name + "'>" + list[i].name + "</option>");
                            }
                        } else
                            $("#allDepartment").html("<option>没找到相关科室</option>");
                    })
                }
                else {
                    var hospitalName = $("#allHospital").find("option:checked").text();
                    $.post("/reservation/selectDepartment", {name:hospitalName},function (data) {
                        if(data.length>0){
                            $("#allDepartment").html("<option>请选择</option>");
                            $("#allDoctor").html("<option>请选择</option>");
                            $("#allTime").html("<option>请选择</option>");
                            for (var i = 0; i<data.length; i++){
                                $("#allDepartment").append("<option value='"+ data[i].name +"'>" + data[i].name + "</option>");
                            }
                        }
                        else
                            $("#allDepartment").html("<option>请选择</option>");
                    })
                }
            })

        })
    </script>
</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <h3>预约挂号</h3>
        <hr class="divider"><!-- 分界线 -->
        <div class="row">
            <div id="reserveForm" class="col-md-12">
                <form class="row">
                    <!--选择医院-->
                    <div class="col-md-5 input-group">
                        <!--标签-->
                        <label class="input-group-addon d-flex align-items-center" for="hospitalName">
                            <span class="icon-office"></span>医院
                        </label>
                        <!--输入框-->
                        <input id="hospitalName" class="form-control" name="hospitalName" type="text" />
                        <!--选择框-->
                        <select id="allHospital" class="form-control">
                            <option>请选择</option>
                            <option  th:each="hospital : ${allHospital}" th:value="${hospital.name}" th:text="${hospital.name}"></option>
                        </select>
                    </div>
                    <!--选择科室-->
                    <div class="col-md-5 input-group">
                        <label class="input-group-addon d-flex align-items-center" for="departmentName">
                            <span class="icon-location-hotel"></span>科室
                        </label>
                        <input id="departmentName" class="form-control" name="departmentName" type="text" disabled="disabled" />
                        <select id="allDepartment" class="form-control" disabled="disabled">
                            <option>请选择</option>
                        </select>
                    </div>
                    <!--选择医生-->
                    <div class="col-md-6 input-group">
                        <label class="input-group-addon d-flex align-items-center">
                            <span class="icon-user-solid-circle"></span>医生
                        </label>
                        <select id="allDoctor" class="form-control" name="doctorName" disabled="disabled">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div class="row"></div><!-- 换行 -->
                    <!--选择预约时间-->
                    <div class="col-md-6 input-group">
                        <label class="input-group-addon d-flex align-items-center">
                            <span class="icon-clock"></span>
                            时间
                        </label>
                        <select id="allTime" class="form-control" name="time" disabled="disabled">
                            <option>请选择</option>
                        </select>
                    </div>
                    <!--提交按钮-->
                    <div class="col-md-12 input-group">
                        <input id="summit" type="button" disabled="disabled" value="预约" data-toggle="modal" data-target="#modal-bill-detail"/>
                    </div>
                </form>
            </div>

            <!--医生信息 start-->
            <div id="doctorInfo">

            </div>
            <!--医生信息 end-->

            <!--生成订单模态框 start-->
            <div id="modal-bill-detail" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!--模态框头部-->
                        <div class="modal-header">
                            <h4>账单详情</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <!--模态框身体-->
                        <div class="modal-body">
                            <div class="container">

                            </div>
                        </div>
                        <!--模态框尾部-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>
            </div>
            <!--生成订单模态框 end-->

        </div>
    </div>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
</html>